<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name=" apple-mobile-web-app-capable" />
    <!-- 隐藏状态栏  -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <!-- <title>账户信息</title> -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/details.css">
</head>

<body>
    <header>
        <div class="wrapper clearfix">
            <div class="login_fl fl">
                <a href="person-center.html" class="login_icon"><img src="img/srh_icon.png" alt=""></a>
            </div>
            <div class="login_fr fr">
                <a href="javascript:save()" class="register_btn">保存</a>
            </div>
            <h1 class="top_title">我的账号</h1>
        </div>
    </header>
    <article class="account">
        <div class="my_head">
            <div>
                <img src="img/your_head.png" alt="" id="avatar" onclick="chooseImg()">
            </div>
        </div>
        <div class="form p10">
            <form action="" method="get">
                <ul>
                    <li>昵称
                        <input type="text" value="" id="nickName">
                    </li>
                    <li>性别
                        <span>男</span>
                        <input type="radio" name="Sex" value="1" checked="checked">
                        <span>女</span>
                        <input type="radio" name="Sex" value="2">
                    </li>
                    <li>
                        年龄
                        <!-- <input type="text" value="19" id="age" onkeypress="return validNum(event)"> -->
                        <select name="" id="age">
                        	<option value="1">1</option>
                        	<option value="2">2</option>
                        	<option value="3">3</option>
                        	<option value="4">4</option>
                        	<option value="">5</option>
                        	<option value="">6</option>
                        	<option value="">7</option>
                        	<option value="">8</option>
                        	<option value="">9</option>
                        	<option value="">10</option>
                        	<option value="">11</option>
                        	<option value="">12</option>
                        	<option value="">13</option>
                        	<option value="">14</option>
                        	<option value="">15</option>
                        	<option value="">16</option>
                        	<option value="">17</option>
                        	<option value="">18</option>
                        	<option value="">19</option>
                        	<option value="">20</option>
                        	<option value="">21</option>
                        	<option value="">22</option>
                        	<option value="">23</option>
                        	<option value="">24</option>
                        	<option value="">25</option>
                        	<option value="">26</option>
                        	<option value="">27</option>
                        	<option value="">28</option>
                        	<option value="">29</option>
                        	<option value="">30</option>
                        	<option value="">31</option>
                        	<option value="">32</option>
                        	<option value="">33</option>
                        	<option value="">34</option>
                        	<option value="">35</option>
                        	<option value="">36</option>
                        	<option value="">37</option>
                        	<option value="">38</option>
                        	<option value="">39</option>
                        	<option value="">40</option>
                        	<option value="">41</option>
                        	<option value="">42</option>
                        	<option value="">43</option>
                        	<option value="">44</option>
                        	<option value="">45</option>
                        	<option value="">46</option>
                        	<option value="">47</option>
                        	<option value="">48</option>
                        	<option value="">49</option>
                        	<option value="">50</option>
                        	<option value="">51</option>
                        	<option value="">52</option>
                        	<option value="">53</option>
                        	<option value="">54</option>
                        	<option value="">55</option>
                        	<option value="">56</option>
                        	<option value="">57</option>
                        	<option value="">58</option>
                        	<option value="">59</option>
                        	<option value="">60</option>
                        	<option value="">61</option>
                        	<option value="">62</option>
                        	<option value="">63</option>
                        	<option value="">64</option>
                        	<option value="">65</option>
                        	<option value="">66</option>
                        	<option value="">67</option>
                        	<option value="">68</option>
                        	<option value="">69</option>
                        	<option value="">70</option>
                        	<option value="">71</option>
                        	<option value="">72</option>
                        	<option value="">73</option>
                        	<option value="">74</option>
                        	<option value="">75</option>
                        	<option value="">76</option>
                        	<option value="">77</option>
                        	<option value="">78</option>
                        	<option value="">79</option>
                        	<option value="">80</option>
                        	<option value="">81</option>
                        	<option value="">82</option>
                        	<option value="">83</option>
                        	<option value="">84</option>
                        	<option value="">85</option>
                        	<option value="">86</option>
                        	<option value="">87</option>
                        	<option value="">88</option>
                        	<option value="">89</option>
                        	<option value="">90</option>
                        	<option value="">91</option>
                        	<option value="">92</option>
                        	<option value="">93</option>
                        	<option value="">94</option>
                        	<option value="">95</option>
                        	<option value="">96</option>
                        	<option value="">97</option>
                        	<option value="">98</option>
                        	<option value="">99</option>
                        	<option value="">100</option>
                        </select>
                    </li>
                    <li>绑定手机号
                        <input type="text" value="" readonly="" id="phonenum"><a class="fr" href="javascript:gotoPN()">修改</a></li>
                    <li>密码
                        <input type="password" value="*******"><a class="fr" href="javascript:gotoPW()">修改</a></li>
                </ul>
            </form>
        </div>
    </article>
    <div class="p10 logout">
        <button onclick="logout()">注销登录</button>
    </div>
</body>
<span style="display:none;"><script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1255764485'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s95.cnzz.com/z_stat.php%3Fid%3D1255764485%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script></span>


<!-- <script src="http://jsconsole.com/remote.js?D26C21F9-CFA7-4385-8901-6A15B4192779"></script> -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/constants.js"></script>
<script src="js/common.js"></script>
<script>
    var urlUploadToAliyun = server_host + '/comment/wx/uploadImage.do';
    var urlGetUserinfo = server_host + '/userweb/getUserInfo.do';
    var params;
    var phoneNum;
    $(document).ready(function() {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: urlGetUserinfo,
            success: function(data) {
                console.log(data);
                params = jsonObjToBase64({
                    age: data.data.age,
                    sex: data.data.sex,
                    srcImg: data.data.srcImg,
                    userId: data.data.userId
                });
                if (data.isUserLogin) {
                    $('#userName').html(data.data.name);
                    $('#avatar').attr('src', data.data && data.data.srcImg || 'img/head.png');
                    $('#phonenum').val(data.data.phone);
                    $('#nickName').val(data.data.name);
                    // $('#age').val(data.data.age);
                    $("#age option:selected").text(data.data.age);
                    if (data.data.sex == 1) {
                        $('input[name="Sex"]').eq(0).prop('checked', true);
                    } else {
                        $('input[name="Sex"]').eq(1).prop('checked', true);
                    }
                }
            }
        });
    });

    function save() {
        var sex = $('input[name="Sex"]:checked').val();
        var nickname = encodeURIComponent($('#nickName').val());
        // var getage = $('#age').val();
        var getage = $("#age option:selected").text();	/*select年龄*/

        var submitUserInfo = server_host + '/userweb/update/updateUserInfo.do' + '?name=' + nickname + '&sex=' + sex + '&age=' + getage;
        console.log(sex);
        $.ajax({
          type: 'POST',
          dataType: 'json',
          url: submitUserInfo,
          success: function(data) {
            console.log(data);

            if (data.data.sex == 1) {
                $('input[name="Sex"]').eq(0).prop('checked', true);
            } else {
                $('input[name="Sex"]').eq(1).prop('checked', true);
            }
            alert("保存成功！");


            // location.href = "person-center.html";
            // 图片上传
            // $.ajax({
            //     type: 'POST',
            //     dataType: 'json',
            //     url: server_host+'userweb/update/updateUserHead.do?img={shortUrl}',
            //     success: function(data) {
            //       console.log(data);
            //       $
            //     }
            // });
          }
        });

    }

    function gotoPW() {
        var phone = $('#phonenum').val();
        location.href = "re_password.html?" + 'phoneNum=' + phone;
    }

    function gotoPN() {
        var phone = $('#phonenum').val();
        location.href = "re-phonenum-verify.html?userInfo=" + params + '&phone=' + phone;
    }

    function logout() {
        var urlLogout = server_host + '/web/user/logout.do';

        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: urlLogout,
            success: function() {
                location.href = 'login.html' + '?fr=accountinfo';
            }
        });
    }

    // 拍照或从手机中选择头像
    function chooseImg() {
        wx.chooseImage({
            success: function(res) {
                console.log('选择成功' + JSON.stringify(res));
                var localIds = res.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

                wx.uploadImage({
                    localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function(res) {
                        // var serverId = res.serverId; // 返回图片的服务器端ID
                        console.log('上传成功');
                        console.log(res.serverId);

                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            url: urlUploadToAliyun + '?media_id=' + res.serverId,
                            success: function(data) {
                                console.log(data);
                                $('.my_head img').attr('src', data.url);
                                // 图片上传
                                $.ajax({
                                    type: 'POST',
                                    dataType: 'json',
                                    url: server_host + '/userweb/update/updateUserHead.do?img=' + data.shortUrl,
                                    success: function(data) {
                                        console.log(data);
                                    }
                                });
                            }
                        });
                    }
                });
            }
        });
    }

    // 微信js sdk初始化
    function wxJssdkInit() {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: server_host + '/h5wx/getWxTicket.do?url=' + encodeURIComponent(location.href.split('#')[0]),
            success: function(data) {
                wx.config({
                    debug: false,
                    appId: wxAppId,
                    timestamp: data.timestamp,
                    nonceStr: data.nonceStr,
                    signature: data.signature,
                    jsApiList: wxJsApi.concat(['chooseImage', 'uploadImage'])
                });
            }
        });
    }

    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', wxJssdkInit, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', wxJssdkInit);
            document.attachEvent('onWeixinJSBridgeReady', wxJssdkInit);
        }
    } else {
        wxJssdkInit();
    }
</script>
<script>
    _maq.push(['_setMaq', 'accountInfo']);
</script>
</html>
